<template>
  <div class="login-container" style="background-image: linear-gradient(to right, #e7a9f8, #639af5);height: 100vh;">

    <div class="login_box">
      <!--      头像区域-->
      <div class="avatar-box">
        <img src="../assets/img/001.png" alt="">
      </div>
      <!--      表单区域-->
      <el-form :model="loginForm" label-width="0px" class="login_form" :rules="loginFormRules" ref="loginFormRef">
        <!--          用户名-->
        <el-form-item prop="username">
          <el-input prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="loginForm.username"></el-input>
        </el-form-item>
        <!--          密码-->
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" type="password" v-model="loginForm.password"></el-input>
        </el-form-item>
<!--        图片验证码生成器-->
        <el-form-item label="" prop="code">
          <el-input v-model="loginForm.code" style='width:54%;display:inline-block;vertical-align:top;'
                    prefix-icon="el-icon-thumb" placeholder="请输入验证码" @keyup.enter.native="submit('loginForm')">
          </el-input>
          <s-identify style='display:inline-block;margin-left: 74px; height:40px;vertical-align:top;cursor:pointer;'
                      :identifyCode="code" :contentHeight='40' @click.native="handleRefreshCode" />
        </el-form-item>
        <!--         按钮-->
        <el-form-item class="btns">
          <el-button type="success" @click="($router.push('/Accon'))">注册</el-button>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>


<script>
import SIdentify from '@/views/SIdentify/SIdentify.vue'
export default {
  components:{SIdentify},
  data() {
    return {
      loading: false,
      code: '6639',
      // 登录表单的数据绑定对象
      loginForm: {
        username: '',
        password: '',
        code: '',
        type: 1

      },
      // 表单验证规则
      loginFormRules: {
        //用户名验证规则
        username: [
          {required: true, message: "请输入登录名称", trigger: "blur",} /* 鼠标失焦触发验证 */,
          {min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur",},
        ],
        //密码验证规则
        password: [
          {required: true, message: "请输入密码", trigger: "blur",} /* 鼠标失焦触发验证 */,
          {min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur",},
        ],
        //图片验证码
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value !== this.code) {
                callback(new Error('验证码错误！重新输入~'));
              }else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ]
      },
    }
  },
  methods: {
    handleRefreshCode() {
      this.code = (Math.random() * 8999 + 1000).toFixed(0).toString();
    },
    submit(name) {
      // 后端交互时需注释
      // 没有登陆接口时，直接放开登陆，默认以超级管理员登陆
      // var userInfo = {
      //   nickname: "超级管理员",
      //   username: 'admin',
      //   roles: 1,
      //   token: "eyJhbGciOiJIUzI1NiJ9.eyJqd3Qt",
      //   "isAuth": false // true开启权限验证模式 ，false 不使用权限验证，默认无权限验证
      // };
      if (!this.loginForm.code) {
        console.log(this.loginForm.code)

        this.$message.error('请输入验证码!');
        // this.loading = false;
        // this.$progress.done();
      } else if (this.loginForm.code !== this.code) {
        this.$message.error('验证码错误!')
      } else {
        console.log(this.loginForm.code);
        return this.loginForm.code
      }
      // this.$ls.set('userInfo',userInfo);
      // this.success('登陆成功！');
      // this.$router.push('/');
      return;
    },
    resetLoginForm() {
      // console.log(this);
      // ref是整个表单的实例对象，表单里设置了ref  ref="loginFormRef" ，通过this.$refs.loginFormRef.resetFields();获取
      // $refs的ref属性loginFormRef再调用官网element的重置属性resetFields的方法--可以实现重置
      this.$refs.loginFormRef.resetFields();
    },
    login() {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        // const {data: res} = await this.$http.post('login', this.loginForm) /* 加await返回的是数据 不加返回promise 而返回的数据里面只有data才是api返回的数据 其他的都是axios的 解构并重命名即data重命名为res */
        // if (res.meta.status !== 200) return this.$message.error('登陆失败！')
        // this.$message.success('登录成功！')
        // 登录成功后:
        // 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中 之后的网络请求中要拿这个token放入请求头中
        //   1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问 token就是登录令牌
        //   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中（不是localstorage）
        // window.sessionStorage.setItem('token', res.data.token)
        await this.$router.push('/home')

      })

    },
  },
}

</script>

<style scoped lang="less">

.login-container {
  //background-color: #2b4b6b;
  //height: 100%;
  // background: linear-gradient(to bottom,  #2b4b6b,#1a524a)
  //background: linear-gradient(to right, #212163, #521b47);
  //background:url('../assets/img/gk-topo-bg.png');
}

.el-button--success {
  margin-right: 180px;
}

.login_box {
  width: 450px;
  height: 338px;
  background-color: #fff;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 3px -3px 20px #8a8989;
}

.avatar-box {
  width: 130px;
  height: 130px;
  border: 1px solid #b2afaf;
  border-radius: 50%;
  padding: 10px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  background: #f5f3f3;
  box-shadow: 0 0 20px #dad9d9;

  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #b2afaf;
  }
}

.btns {
  display: flex;
  justify-content: flex-end;
}

.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
</style>
